{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}
{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}
{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/fonts/font-awesome/font-awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationbootstrap/css/multilevel-menu/sb-admin-2.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}

{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="row">
        	<div class="col-lg-12">
        	    <h1>Multilevel Menu BCORE Admin</h1>
        	</div>
        </div>
        <div class="row">
        	<div class="col-sm-5">
        	
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse-sb2">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">BCORE Admin</a>
                </div>
                <!-- /.navbar-header -->

                <ul class="nav navbar-top-links navbar-right">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-envelope fa-fw"></i>  <i class="fa fa-caret-down"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-messages">
                            <li>
                                <a href="#">
                                    <div>
                                        <strong>John Smith</strong>
                                        <span class="pull-right text-muted">
                                            <em>Yesterday</em>
                                        </span>
                                    </div>
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <div>
                                        <strong>John Smith</strong>
                                        <span class="pull-right text-muted">
                                            <em>Yesterday</em>
                                        </span>
                                    </div>
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <div>
                                        <strong>John Smith</strong>
                                        <span class="pull-right text-muted">
                                            <em>Yesterday</em>
                                        </span>
                                    </div>
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a class="text-center" href="#">
                                    <strong>Read All Messages</strong>
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </li>
                        </ul>
                        <!-- /.dropdown-messages -->
                    </li>
                    <!-- /.dropdown -->
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-tasks fa-fw"></i>  <i class="fa fa-caret-down"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-tasks">
                            <li>
                                <a href="#">
                                    <div>
                                        <p>
                                            <strong>Task 1</strong>
                                            <span class="pull-right text-muted">40% Complete</span>
                                        </p>
                                        <div class="progress progress-striped active">
                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                                <span class="sr-only">40% Complete (success)</span>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <div>
                                        <p>
                                            <strong>Task 2</strong>
                                            <span class="pull-right text-muted">20% Complete</span>
                                        </p>
                                        <div class="progress progress-striped active">
                                            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                                <span class="sr-only">20% Complete</span>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <div>
                                        <p>
                                            <strong>Task 3</strong>
                                            <span class="pull-right text-muted">60% Complete</span>
                                        </p>
                                        <div class="progress progress-striped active">
                                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                                <span class="sr-only">60% Complete (warning)</span>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <div>
                                        <p>
                                            <strong>Task 4</strong>
                                            <span class="pull-right text-muted">80% Complete</span>
                                        </p>
                                        <div class="progress progress-striped active">
                                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                                <span class="sr-only">80% Complete (danger)</span>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a class="text-center" href="#">
                                    <strong>See All Tasks</strong>
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </li>
                        </ul>
                        <!-- /.dropdown-tasks -->
                    </li>
                    <!-- /.dropdown -->
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-bell fa-fw"></i>  <i class="fa fa-caret-down"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-alerts">
                            <li>
                                <a href="#">
                                    <div>
                                        <i class="fa fa-comment fa-fw"></i> New Comment
                                        <span class="pull-right text-muted small">4 minutes ago</span>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <div>
                                        <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                        <span class="pull-right text-muted small">12 minutes ago</span>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <div>
                                        <i class="fa fa-envelope fa-fw"></i> Message Sent
                                        <span class="pull-right text-muted small">4 minutes ago</span>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <div>
                                        <i class="fa fa-tasks fa-fw"></i> New Task
                                        <span class="pull-right text-muted small">4 minutes ago</span>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <div>
                                        <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                        <span class="pull-right text-muted small">4 minutes ago</span>
                                    </div>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a class="text-center" href="#">
                                    <strong>See All Alerts</strong>
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </li>
                        </ul>
                        <!-- /.dropdown-alerts -->
                    </li>
                    <!-- /.dropdown -->
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                            </li>
                            <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                            </li>
                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                    <!-- /.dropdown -->
                </ul>
                <!-- /.navbar-top-links -->

                <div class="sidebar">
                    <div class="collapse navbar-collapse sidebar-nav navbar-collapse-sb2">
                        <ul class="nav" id="side-menu">
                            <li class="sidebar-search">
                                <div class="input-group custom-search-form">
                                    <input type="text" class="form-control" placeholder="Search...">
                                    <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </span>
                                </div>
                                <!-- /input-group -->
                            </li>
                            <li>
                                <a class="active" href="#"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
                            </li>
			                <li>
			                    <a href="javascript:;" data-toggle="collapse" data-target="#DDL-nav"><i class="fa fa-sitemap fa-fw"></i> 3 Level Menu Admin SB2<span class="pull-right"><i class="fa fa-angle-left"></i></span></a>
			                    <ul id="DDL-nav" class="nav nav-second-level collapse">
			                        <li>
			                            <a href="javascript:;" data-toggle="collapse" data-target="#DDL1-nav"><i class="fa fa-sitemap fa-fw"></i> Demo Link 1 <span class="pull-right"><i class="fa fa-angle-left"></i></span></a>
			                            <ul id="DDL1-nav" class="nav nav-third-level collapse">
			                                <li><a href="#"><i class="fa fa-angle-right"></i> Demo Link 1 </a></li>
			                                <li><a href="#"><i class="fa fa-angle-right"></i> Demo Link 2 </a></li>
			                                <li><a href="#"><i class="fa fa-angle-right"></i> Demo Link 3 </a></li>
			                            </ul>
			                        </li>
			                        <li><a href="#"><i class="fa fa-angle-right"></i> Demo Link 2 </a></li>
			                        <li><a href="#"><i class="fa fa-angle-right"></i> Demo Link 3 </a></li>
			                        <li><a href="#"><i class="fa fa-angle-right"></i> Demo Link 4 </a></li>
			                    </ul>
			                </li>
			                <li>
			                    <a href="javascript:;" data-toggle="collapse" data-target="#DDL4-nav"><i class="fa fa-folder-open"></i> 4 Level Menu BCORE<span class="pull-right"><i class="fa fa-angle-left"></i></span></a>
			                    <ul id="DDL4-nav" class="nav accordion collapse">
			                        <li>
			                            <a href="javascript:;" data-toggle="collapse" data-target="#DDL4_1-nav"><i class="fa fa-folder-open"></i> Demo Link 1 <span class="pull-right"><i class="fa fa-angle-left"></i></span></a>
			                            <ul id="DDL4_1-nav" class="nav accordion collapse" >
			                                <li>
			                                    <a href="javascript:;" data-toggle="collapse" data-target="#DDL4_2-nav"><i class="fa fa-folder-open"></i> Demo Link 1 <span class="pull-right"><i class="fa fa-angle-left"></i></span></a>
			                                    <ul id="DDL4_2-nav" class="nav accordion collapse" >
			                                        <li><a href="#"><i class="fa fa-angle-right"></i> Demo Link 1 </a></li>
			                                        <li><a href="#"><i class="fa fa-angle-right"></i> Demo Link 2 </a></li>
			                                    </ul>
			                                </li>
			                                <li><a href="#"><i class="fa fa-angle-right"></i> Demo Link 2 </a></li>
			                                <li><a href="#"><i class="fa fa-angle-right"></i> Demo Link 3 </a></li>
			                            </ul>
			                        </li>
			                        <li><a href="#"><i class="fa fa-angle-right"></i> Demo Link 2 </a></li>
			                        <li><a href="#"><i class="fa fa-angle-right"></i> Demo Link 3 </a></li>
			                        <li><a href="#"><i class="fa fa-angle-right"></i> Demo Link 4 </a></li>
			                    </ul>
			                </li>
                            <li>
                                <a href="javascript:;" data-toggle="collapse" data-target="#charts"><i class="fa fa-fw fa-bar-chart-o"></i> Charts <span class="pull-right"><i class="fa fa-angle-left"></i></span></a>
		                        <ul id="charts" class="nav nav-second-level collapse">
                                    <li>
                                        <a href="#">Flot Charts</a>
                                    </li>
                                    <li>
                                        <a href="#">Morris.js Charts</a>
                                    </li>
                                </ul>
                                <!-- /.nav-second-level -->
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-table fa-fw"></i> Tables</a>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-edit fa-fw"></i> Forms</a>
                            </li>
                            <li>
                                <a href="javascript:;" data-toggle="collapse" data-target="#ui-elements"><i class="fa fa-wrench fa-fw"></i> UI Elements <span class="pull-right"><i class="fa fa-angle-left"></i></span></a>
		                        <ul id="ui-elements" class="nav nav-second-level collapse">
                                    <li>
                                        <a href="#">Panels and Wells</a>
                                    </li>
                                    <li>
                                        <a href="#">Buttons</a>
                                    </li>
                                    <li>
                                        <a href="#">Notifications</a>
                                    </li>
                                    <li>
                                        <a href="#">Typography</a>
                                    </li>
                                    <li>
                                        <a href="#">Grid</a>
                                    </li>
                                </ul>
                                <!-- /.nav-second-level -->
                            </li>
                            <li>
                                <a href="javascript:;" data-toggle="collapse" data-target="#multi-level"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown <span class="pull-right"><i class="fa fa-angle-left"></i></span></a>
		                        <ul id="multi-level" class="nav nav-second-level collapse">
                                    <li>
                                        <a href="#">Second Level Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Second Level Item</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" data-toggle="collapse" data-target="#multi-level1"><i class="fa fa-sitemap fa-fw"></i> Third Level <span class="pull-right"><span class="fa fa-angle-left"></span></span></a>
                                        <ul id="multi-level1" class="nav nav-third-level collapse">
                                            <li>
                                                <a href="#">Third Level Item</a>
                                            </li>
                                            <li>
                                                <a href="#">Third Level Item</a>
                                            </li>
                                            <li>
                                                <a href="#">Third Level Item</a>
                                            </li>
                                            <li>
                                                <a href="#">Third Level Item</a>
                                            </li>
                                        </ul>
                                        <!-- /.nav-third-level -->
                                    </li>
                                </ul>
                                <!-- /.nav-second-level -->
                            </li>
                            <li>
                                <a href="javascript:;" data-toggle="collapse" data-target="#sample-pages"><i class="fa fa-files-o fa-fw"></i> Sample Pages <span class="pull-right"><i class="fa fa-angle-left"></i></span></a>
		                        <ul id="sample-pages" class="nav nav-second-level collapse">
                                    <li>
                                        <a href="#">Blank Page</a>
                                    </li>
                                    <li>
                                        <a href="#">Login Page</a>
                                    </li>
                                </ul>
                                <!-- /.nav-second-level -->
                            </li>
                        </ul>
                    </div>
                    <!-- /.sidebar-collapse -->
                </div>
                <!-- /.navbar-static-side -->
            </nav>
        	
        	</div>
        	<div class="col-sm-6">content</div>
        </div>






    </div> <!-- /container -->
{% endblock %}